<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 阻止表单默认提交   onsubmit="return false" -->

    <button class="get">get</button>
    <button class="set">set</button>
    <form action="" method="get" >
        <div class="input-group">
            <label >年龄:</label>
            <!-- 默认多选 -->
            <select name="age" id="" multiple="multiple">
                <option value="0">2000</option>
                <option value="1">2001</option>
                <option value="2">2002</option>
                <option value="3">2003</option>
                <option value="4">2004</option>
                <option value="5">2005</option>
                <option value="6">2006</option>
                <option value="7">2007</option>
                <option value="8">2008</option>
                <option value="9">2009</option>
                <option value="10">2010</option>
                <option value="11">2011</option>
                <option value="12">2012</option>
                <option value="13">2013</option>
                <option value="14">2014</option>
                <option value="15">2015</option>
                <option value="16">2016</option>
                <option value="17">2017</option>
                <option value="18">2018</option>
                <option value="19">2019</option>
                <option value="20">2020</option>
                <option value="21" selected>2021</option>
            </select>
        </div>

      
    </form>
</body>
<script>
   
    var ageSel = document.getElementsByName("age")[0];

    var get = document.getElementsByClassName("get")[0];
    var set = document.getElementsByClassName("set")[0];

    // 元素节点的属性 表单相关

    // 所有表单空间
    // value   获取和设置表单元素value值
    // name    获取和设置表单元素name属性

    // input 相关
    // type    获取和设置表单元素type属性(input )
    // placeholder  获取和设置表单元素placeholder属性

    // input:number
    // min   获取和设置表单元素的min属性 
    // max   获取和设置表单元素的max属性
    // step   获取和设置表单元素的step属性

    // textarea
    // cols   获取和设置表单元素的cols属性
    // rows   获取和设置表单元素的rows属性
    // maxlength   获取和设置表单元素的maxlength属性
    // placeholder   获取和设置表单元素的placeholder属性

    // 状态相关
    // disabled   获取和设置表单元素是否禁用  true:禁用 false(false):不禁用
    // required   获取和设置表单元素是否必填  true:必填 false(false):选填
    // checked    获取和设置表单元素是否被选中(单选框 复选框)  true:选中 false(false):未选中

    // 下拉框
    // value   => 获取和设置下拉框的value值 =>  如果option中有value属性则优先取option中的value值,否则取option中标签内的值
    // selectedIndex  获取和设置下拉框中被选中的option的下标
    // selectedOptions 获取被选中的option元素的集合

    get.onclick = function(){
        console.log(ageSel.value);
        console.log(ageSel.selectedIndex);
        console.log(ageSel.selectedOptions);
    }

    set.onclick = function(){
        //    ageSel.value= "10"
        ageSel.selectedIndex = 10;
    }




</script>
</html>